<!-- Course 课程管理 -->
<template>
  <div class="content">
    <el-form :model="query" ref="searchForm" label-width="100px" size="medium" class="search-form">
      <el-form-item label="课程名称：" prop="title">
        <el-input v-model="query.title" placeholder="请输入课程名称" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>
      <el-form-item label="课程类型：" prop="type">
        <el-select v-model="query.type" placeholder="请选择课程类型" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="课程状态：" prop="type">
        <el-select v-model="query.status" placeholder="请选择课程状态" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="0px">
        <Cbutton @click="handleSearch" size="medium">查询</Cbutton>
        <Cbutton type="info" size="medium" @click="handleReset('searchForm')">重置</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">新建课程</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="title" label="课程名称" align="center" min-width="100"></el-table-column>
        <el-table-column prop="pic" label="课程封面" align="center" min-width="200">
          <template slot-scope="scope">
            <el-image style="width: auto;height: 90px;" :src="scope.row.pic" :preview-src-list="scope.row.pic ? [scope.row.pic] : []">
              <div slot="error" class="image-slot" style="margin-top:25px;">
                <i class="el-icon-picture-outline"></i> <br />
                加载失败
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="课程类型" align="center" min-width="110">
          <template slot-scope="scope">
            {{dealStr(scope.row.type, 'typeList')}}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="课程介绍" align="center" min-width="200">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.description && scope.row.description.length > 20" placement="top-start" title=""
                        width="200" trigger="hover" :content="scope.row.description">
              <span slot="reference">{{scope.row.description.substring(20, 0) + '...'}}</span>
            </el-popover>
            <div v-else>{{ scope.row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bSort" label="课程排序" align="center" min-width="100"></el-table-column>
        <el-table-column prop="useTime" label="学习用时(秒)" align="center" min-width="100"></el-table-column>
        <el-table-column prop="vidioTime" label="视频时长(秒)" align="center" min-width="100"></el-table-column>
        <el-table-column prop="vidioTime" label="访问量" align="center" min-width="120">
          <template slot-scope="scope">
            <p>访客量：{{scope.row.bUv || 0}}</p>
            <p>浏览量：{{scope.row.bPv || 0}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="160">
          <template slot-scope="scope">
            {{scope.row.createTime | glbTimeFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center" min-width="160">
          <template slot-scope="scope">
            {{scope.row.updateTime | glbTimeFormat}}
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" align="center" min-width="100">
          <template slot-scope="scope">
            {{dealStr(scope.row.status, 'statusList')}}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" min-width="100">
          <template slot-scope="prop">
            <el-button type="text" size="medium" @click="handleUpdate(prop.row)">编辑</el-button>
            <el-button type="text" size="medium" style="color: #F56C6C;" @click="handleRemove(prop.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>
  </div>
</template>

<script>
import { GetCourseList, RemoveCourse } from '@/api/train'
import { ExportList } from '@/utils'
export default {
  name: 'Course',
  components: {},
  data () {
    return {
      query: {
        title: '',
        type: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableLoading: false,

      // 类型：1视频课程 2：文章课程
      typeList: ExportList('courseTypeList'),
      // 状态：0未上架 1上架
      statusList: ExportList('courseStatusList')
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      let params = JSON.parse(JSON.stringify(this.query))
      this.tableLoading = true
      GetCourseList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(e => {
        this.tableLoading = false
      })
    },
    handleAdd () {
      this.$router.push({ name: 'train:course:add' })
    },
    handleUpdate (row) {
      this.$router.push({ name: 'train:course:edit', query: { id: row.id } })
    },
    handleRemove (row) {
      if (row.status === 1) {
        this.$message.warning('上架课程不得删除！')
      } else {
        // bDelete (integer, optional): 是否删除：0否 1是 ,
        this.$confirm(`确定要删除该课程吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parmas = { id: row.id, bDelete: 1 }
          RemoveCourse(parmas).then(res => {
            this.$message.success(res.message || '删除成功')
            this.getList()
          }).catch(() => { })
        }).catch(() => { })
      }
    },
    handleSearch () {
      this.query.pageNum = 1
      this.getList()
    },
    handleReset (formName) {
      this.$refs[formName].resetFields()
    },
    dealStr (key, listKey) {
      const arr = this[listKey]
      let str = ''
      arr.forEach(e => {
        const valueNumber = parseInt(e.value)
        if (e.value === key || valueNumber === key) {
          str = e.label
        }
      })
      return str
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    }
  }
}

</script>
<style lang='less' scoped>
</style>
